import Icon from '@/components/Icon'
import useInitState from '@/hooks/useInitialState'
import { getUserChannel } from '@/store/actions/home'
import { Tabs } from 'antd-mobile'

import styles from './index.module.scss'

const Home = () => {
  const { userChannels } = useInitState(getUserChannel, 'home')
  return (
    <div className={styles.root}>
    {/* 频道 Tabs 列表 */}
    <Tabs className="tabs">
      {userChannels.length > 0 && userChannels.map((item) => (
        <Tabs.Tab title={item.name} key={item.id}>
          {item.name}的内容
        </Tabs.Tab>
      ))}
    </Tabs>

    <div className="tabs-opration">
      <Icon type="iconbtn_search" />
      <Icon type="iconbtn_channel" />
    </div>
  </div>
  )
}

export default Home
